<template>
  <div class="redio">
    <header>
      <van-icon  name="arrow-left" class="icons" @click="Goback"/>
      <div class="input">
        <button>姜姗姗</button>
        <p>
          <span>在线人数</span>
          <span>4965 观看</span>
        </p>
        <button class="two-button" @click="attention1()">{{attention}}</button>
      </div>
      <div class="btn">
        <img src="../../../images/bargain/banner-1.png" alt="" />
        <img src="../../../images/bargain/banner-1.png" alt="" />
        <img src="../../../images/bargain/banner-1.png" alt="" />
      </div>
      <button @click="startLive" class="button">开启直播</button>
    </header>
    <main>
      <vue-baberrage
        :isShow="barrageIsShow"
        :barrageList="barrageList"
        :loop="barrageLoop"
      >
      </vue-baberrage>
      <div class="my_live">
        <video id="local-video" autoplay class="liveBox"></video>
      </div>

      <div class="tallBox">
        <div v-for="(item, index) in data1" :key="index">
          <p>
            {{ item }}
          </p>
        </div>
      </div>
    </main>
    <footer>
      <input
        type="text"
        placeholder="跟主播聊点什么..."
        v-model="value"
        @keydown="pinglun"
      />
      <div class="right">
        <van-cell style="background: #000">
          <img
            src="../../../images/bargain/1.png"
            alt=""
            class="img"
            @click="showPopup"
          />
        </van-cell>
        <van-popup
          v-model="show"
          round
          position="bottom"
          :style="{ height: '60%' }"
        >
          <div class="heads">
            <span>全部商品</span>
            <span @click="close">返回</span>
          </div>
          <dl v-for="(item, index) in data" :key="index" class="lists">
            <dt>
              <img :src="item.url" alt="" />
            </dt>
            <dd>
              <p>{{ item.title }}</p>
              <p>已售{{ item.num }}+件</p>
              <p>
                <span>¥45</span>
                <button @click="Gopay">加入购物车</button>
                <button @click="Gobuy">立即购买</button>
              </p>
            </dd>
          </dl>
        </van-popup>
      </div>
    </footer>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import { Popup } from "vant";
import { createRoom, startVideoTalk } from "../../../utils/websocket";
Vue.use(Popup);
export default {
  data() {
    return {
      show: false,
      data: [],
      data1: ["公告:欢迎来到小可爱的直播间"],
      value: "",
      barrageIsShow: true,
      messageHeight: 3,
      boxHeight: 150,
      barrageLoop: true,
      maxWordCount: 3,
      throttleGap: 5000,
      barrageList: [],
      attention:'关注',
      show1:false,
    };
  },
  mounted() {
    this.addToList();
  },
  methods: {
    Goback() {
      this.$router.push("/streaming");
    },
    showPopup() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    startLive() {
      startVideoTalk();
    },
    Gopay() {
      this.$router.push("/shoppingcar");
    },
    Gobuy() {
      this.$router.push("/paymentfront");
    },
    pinglun(e) {
      if (e.keyCode == 13) {
        this.data1.push(this.value);
        this.value = "";
      }
    },
    addToList() {
      let list = [
        {
          id: 1,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '你好啊',
          time: 3,
          barrageStyle: "red",
        },
        {
          id: 2,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '加油，我们一起努力',
          time: 8,
          barrageStyle: "green",
        },
        {
          id: 3,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg:'我们一起奋斗60天',
          time: 10,
          barrageStyle: "normal",
        },
        {
          id: 4,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg:'我们一起去名企',
          time: 5,
          barrageStyle: "blue",
        },
        {
          id: 5,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '我们一定会成功的',
          time: 6,
          barrageStyle: "red",
        },
        {
          id: 6,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '我爱js',
          time: 12,
          barrageStyle: "normal",
        },
        {
          id: 7,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '祝你高薪就业',
          time: 7,
          barrageStyle: "red",
        },
        {
          id: 8,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '祝你们学业有成',
          time: 4,
          barrageStyle: "normal",
        },
        {
          id: 9,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '我们要高薪',
          time: 11,
          barrageStyle: "red",
        },
        {
          id: 10,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: '我们要去阿里',
          time: 10,
          barrageStyle: "yellow",
        },
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          barrageStyle: v.barrageStyle,
        });
      });     
    },
    attention1(){
      if(!this.show1){
        this.attention='已关注'
      }
    }
  },
  created() {
    axios("/showList").then((res) => {
      console.log(res);
      this.data = res.data.list;
    });
    createRoom({
      roomName: "小可爱的直播间",
      roomId: new Date().getTime(),
      userName: "小可爱",
    });
  },
};
</script>

<style lang="scss" scoped>
.my_live{
  height: 100%;
}
.redio {
  font-size: 18px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  display: flex;
  background: #000;
  color: #fff;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  padding: 0 10px;
}
#local-video {
  height: 100%;
  max-width: none;
}
.btn {
  display: flex;
  align-items: center;
  img {
    border: 0;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    border-radius: 50%;
  }
}
.van-cell {
  height: 60px;
}
.input {
  border: 2px solid #fff;
  display: flex;
  border-radius: 40px;
  width: 190px;
  justify-content: space-between;
  font-size: 12px;
  align-items: center;
  p {
    span {
      display: block;
    }
  }
  > button {
    width: 50px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: orangered;
  }
}
.two-button {
  width: 60px;
  height: 50px;
}
main {
  flex: 1;
  background: #ccc;
}
.tallBox {
  width: 270px;
  height: 157px;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 20px;
  bottom: 50px;
  border-radius: 15px;
  font-size: 15px;
  color: gold;
  p{
    margin-left: 10px;
    margin-top: 10px;
  }
}
footer {
  height: 60px;
  display: flex;
  align-items: center;
  background: #000;
  input {
    background: #000;
    width: 250px;
    border: 0;
    color: #fff;
    text-indent: 12px;
    font-weight: bold;
  }
  img {
    height: 100%;
    max-width: none;
  }
}
.right {
  flex: 1;
  width: 100%;
  .img {
    margin-left: 100px;
  }
  dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f5;
    margin: 3px 0;
    padding: 0 5px;
    dd {
      font-size: 14px;
      line-height: 28px;
      margin-left: 8px;
      span {
        font-size: 16px;
        color: orangered;
      }
      button {
        padding: 6px 12px;
        border: 0;
        border-radius: 13px;
        background: orangered;
        color: #fff;
        margin: 0 5px;
      }
    }
    dt {
      img {
        border-radius: 12px;
      }
    }
    p:nth-child(1) {
      font-weight: bold;
    }
  }
}
.shopBox {
  width: 300px;
  height: 130px;
  background: #fff;
  position: absolute;
  right: 35px;
  bottom: 80px;
  border-radius: 16px;
  .head {
    background: orangered;
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    color: #fff;
    border-radius: 11px 11px 0 0;
  }
  .main {
    dl {
      display: flex;
      align-items: center;
    }
    dt {
      img {
        display: block;
        width: 130px;
        height: 80px;
      }
    }
    dd {
      font-size: 14px;
      margin-left: 8px;
      padding: 0 4px;
      p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6px;
        b {
          font-size: 18px;
          color: orangered;
        }
        span {
          padding: 8px 12px;
          background: orangered;
          color: #fff;
          border-radius: 16px;
        }
      }
    }
  }
}
.heads {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.baberrage-stage {
  width: 100%;
  height: 30%;
}
.barrages-drop {
  display: flex;
  width: 100%;
  z-index: 99;
  .blue {
    border-radius: 100px;
    background: #e6ff75;
    color: #fff;
  }
  .green {
    border-radius: 100px;
    background: #75ffcd;
    color: #fff;
  }
  .red {
    border-radius: 100px;
    background: #e68fba;
    color: #fff;
  }
  .yellow {
    border-radius: 100px;
    background: #dfc795;
    color: #fff;
  }
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 212px;
    overflow: hidden;
    top: 0;
    margin-top: 130px;
  }
}
</style>
